<template>
	<view style="height:100vh">
		<layout>
		
			<div class="page-container">
				<a-spin :spinning="spinning" style="width:100%"/>
				<div v-for="(item, index) in data" :key="index" class="card-item-container">
					<a-card class="custom-card" :title="item.companyName" :extra="item.auditStatus"
						:body-style="{ padding: '20px' }" hoverable>
						<div class="card-content">
							<p><strong>联系人:</strong> {{ item.contactPerson }}</p>
							<p><strong>联系电话:</strong> {{ item.contactNumber }}</p>
						</div>
					</a-card>
				</div>
			</div>
		</layout>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		listSupplier,
		getSupplier,
		delSupplier,
		addSupplier,
		updateSupplier,
		exportSupplier,
		submitSupplier
	} from "@/api/purchase/supplier";
	// 模拟数据
	const data = ref([]);
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	const spinning=ref(true);
	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			return null;
		}
	}
	async function getList() {
		try {
			const ref = await listSupplier({
				pageNum: 1,
				pageSize: 100,
				applyStatus: 2
			});
			console.log(ref)
			let d = []
			// 使用 for...of 循环处理异步操作
			for (const item of ref.rows) {
				const status=getDictVaule("audit_status",item.auditStatus)
				let a = {
					companyName: item.name,
					contactPerson: item.contact,
					contactNumber: item.contactTel,
					auditStatus: "通过",
				};

				d.push(a);
			}
			data.value = d;
			spinning.value=false;
			console.log(data.value)
		} catch (error) {
			
		}
	}
	getList()
</script>

<style scoped>
	.page-container {
		padding: 20px;
		background-color: #f4f4f4;
	}

	.card-item-container {
		margin-bottom: 20px;
		/* 使卡片之间有间距 */
	}

	.custom-card {
		border-radius: 12px;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.custom-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	}

	.custom-card .ant-card-body {
		background: linear-gradient(135deg, #f7f8fa, #ffffff);
		border-radius: 12px;
	}

	.card-content p {
		margin: 8px 0;
		font-size: 14px;
		color: #333;
	}

	.card-content p strong {
		color: #1890ff;
	}

	@media (max-width: 767px) {
		.card-item-container {
			width: 100%;
		}
	}

	@media (min-width: 768px) and (max-width: 1024px) {
		.card-item-container {
			width: 100%;
		}
	}

	@media (min-width: 1025px) {
		.card-item-container {
			width: 100%;
		}
	}
</style>